<template>
  <div class="App">
    <div>
      <!-- <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friends">朋友</a> -->
      <!-- 使用routerLink代替a标签 -->
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friends">朋友</router-link>
    </div>
    <div class="top"></div>
    <router-view></router-view>
  </div>
</template>

<script>
</script>

<style lang="less" scoped>
.App {
  a {
    margin-left: 10px;
  }
  // 设置高亮， 原理 router-link本质也是a标签，点到哪个a标签，就会自动加上router-link-active类
  a.router-link-active {
    background-color: purple;
  }

  // 在index中替换了 router-link中的类名后
  a.link-mohu0{
    background-color: skyblue;
  }
}
</style> 